<template>
  <!-- 左边菜单栏 -->
  <div style="display: flex;height: 100%">
    <div class="datacenter-navigation" :class="isCollapse ? 'datacenter-navigation-closed' : ''">
      <div v-if="!isCollapse" class="header-bar">
        <div class="account-name">{{ userInfo.userName }}</div>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24"
             class="dls-icon icon" focusable="false" @click="changeIsCollapse(true)">
          <path fill="currentColor"
                d="M2 3h20v2H2V3zm6 5.5h14v2H8v-2zM8 14v2h14v-2H8zm-6 5.5h20v2H2v-2zm-.033-7.638a.6.6 0 0 0 0 .876l3.323 3.115a.6.6 0 0 0 1.01-.438v-6.23a.6.6 0 0 0-1.01-.438l-3.323 3.115z"></path>
        </svg>
      </div>
      <div v-else class="header-bar">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24"
             class="dls-icon icon" focusable="false" @click="changeIsCollapse(false)">
          <path fill="currentColor"
                d="M22 3H2v2h20V3zm-6 5.5H2v2h14v-2zm0 5.5v2H2v-2h14zm6 5.5H2v2h20v-2zm.033-7.638a.6.6 0 0 1 0 .876l-3.323 3.115a.6.6 0 0 1-1.01-.438v-6.23a.6.6 0 0 1 1.01-.438l3.323 3.115z"></path>
        </svg>
      </div>

      <el-menu @select="handleSelect" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
               :default-active="activeIndexs" :collapse="isCollapse" router>
        <el-submenu :index="item.name" v-for="item in headerList" :key="item.name" :class="{ 'active-parent': isParentActive(item) }">
          <template slot="title">
                  <span class="one-menu-submenu-custom-icon anchor" style="margin-right: 10px;font-size: 14px">
                        <svg  v-if="item.name=='推广报告'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="16" height="16" class="dls-icon " focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M6.5 1.5a5 5 0 0 0-5 5v11a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5v-11a5 5 0 0 0-5-5h-11zm-3 5a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v6.795l-2.601-2.278a3.222 3.222 0 1 0-5.687-.643l-1.181 1.18A3.208 3.208 0 0 0 9.222 11a3.21 3.21 0 0 0-2.063.747L3.5 8.087V6.5zm0 4.415V17.5a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-1.546l-4.213-3.69a3.22 3.22 0 0 1-2.807-.33l-1.217 1.218a3.222 3.222 0 1 1-6.18.347L3.5 10.915zm12.945-1.693a1.222 1.222 0 1 0-2.445 0 1.222 1.222 0 0 0 2.445 0zM9.222 13a1.222 1.222 0 1 1 0 2.445 1.222 1.222 0 0 1 0-2.445z" clip-rule="evenodd"></path></svg>
                      <svg v-else-if="item.name=='转化报告'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="16" height="16"  class="dls-icon " focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M1.5 17.5v-16h2v16A3 3 0 0 0 6 20.459V14a3 3 0 1 1 6 0v6.5h2V10a3 3 0 1 1 6 0v10.5h2.5v2h-16a5 5 0 0 1-5-5zm16.5 3V10a1 1 0 1 0-2 0v10.5h2zM10 14v6.5H8V14a1 1 0 1 1 2 0z" clip-rule="evenodd"></path></svg>

                      <svg v-else-if="item.name=='定向报告'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="16" height="16" class="dls-icon " focusable="false"><path fill="currentColor" d="M6 10h12V8H6v2zm12 6h-4v-2h4v2zM7.847 17.546l3.983-3.903-1.26-1.286-2.674 2.621-1.242-1.312-1.308 1.237 2.501 2.643z"></path><path fill="currentColor" fill-rule="evenodd" d="M6.5 1.5a5 5 0 0 0-5 5v11a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5v-11a5 5 0 0 0-5-5h-11zm-3 5a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3h-11a3 3 0 0 1-3-3v-11z" clip-rule="evenodd"></path></svg>

                      <svg v-else-if="item.name=='创意报告'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="16" height="16" class="dls-icon " focusable="false"><path fill="currentColor" d="M18 17H6v-2h12v2z"></path><path fill="currentColor" fill-rule="evenodd" d="M8 7a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H8zm0 2h8v2H8V9z" clip-rule="evenodd"></path><path fill="currentColor" fill-rule="evenodd" d="M1.5 6.5a5 5 0 0 1 5-5h11a5 5 0 0 1 5 5v11a5 5 0 0 1-5 5h-11a5 5 0 0 1-5-5v-11zm5-3a3 3 0 0 0-3 3v11a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-11a3 3 0 0 0-3-3h-11z" clip-rule="evenodd"></path></svg>

                      <svg v-else-if="item.name=='落地页报告'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="16" height="16" class="dls-icon " focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M1 5.9a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4v-12zm4-2a2 2 0 0 0-2 2V7h4.6V3.9H5zM21 7h-4.1V3.9H19a2 2 0 0 1 2 2V7zm-5.9 0H9.4V3.9h5.7V7zM3 14.5V9h18v5.5H3zm0 2v1.4a2 2 0 0 0 2 2h2.6v-3.4H3zm6.4 0v3.4h5.7v-3.4H9.4zm7.5 0v3.4H19a2 2 0 0 0 2-2v-1.4h-4.1z" clip-rule="evenodd"></path></svg>
                      <svg v-else-if="item.name=='专项报告'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="16" height="16" class="dls-icon " focusable="false"><path fill="currentColor" d="M9.5 10.5h-3v-2h3v2zm2 0h6v-2h-6v2zm-2 5h-3v-2h3v2zm2 0h6v-2h-6v2z"></path><path fill="currentColor" fill-rule="evenodd" d="M1.5 6.5a5 5 0 0 1 5-5h10.973a5 5 0 0 1 5 4.991l.02 11a5 5 0 0 1-5 5.009H6.5a5 5 0 0 1-5-5v-11zm5-3a3 3 0 0 0-3 3v11a3 3 0 0 0 3 3h10.993a3 3 0 0 0 3-3.005l-.02-11a3 3 0 0 0-3-2.995H6.5z" clip-rule="evenodd"></path></svg>
                     </span>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="child.url" v-for="child in item.children" :key="child.name">
              {{ child.name }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div style="margin: 20px;">
      <router-view @changeActiveIndexs="changeActiveIndexs" style="min-height:91vh;"></router-view>
    </div>
  </div>
</template>

<script>
    import {getLocalStorageItem} from '@/utils/storage-helper';
    import * as COLLAPSE from "./collapse.store";
    import NavigationItem from "./navigation-item";
    // import {store, actions} from "../monitor/work-point.store";
    import {mutations} from "./collapse.store";
    import Styles from "@/views/fc/datacenter/styles";
    export default {
        components: {Styles, NavigationItem},
        data() {
            return {
              activeIndexs:'/account',
                isCollapse: false,
              userInfo: getLocalStorageItem('userInfo'),
                headerList: [{
                    name: '推广报告',
                    children: [{
                        name: '账户报告',
                        url: '/account',
                    }, {
                        name: '计划报告',
                        url: '/campaign',
                    }, {
                        name: '单元报告', url: '/adgroup',
                    }]
                },{
                  name: '转化报告',
                  children: [ {
                    name: 'oCPC报告', url: '/ocpc',
                  },{
                    name: '一键起量报告', url: '/liftBudgetReport',
                  }]
                },{
                    name: '定向报告',
                    children: [{
                        name: '关键词报告', url: '/keyword',
                    }, {
                        name: '搜索词报告', url: '/queryword',
                    }, {
                        name: '商品报告', url: '/commodity',
                    }, {
                        name: '人群报告', url: '/crowd',
                    }]
                },  {
                    name: '创意报告',
                    children: [{
                        name: '创意报告', url: '/creative',
                    }, {
                        name: '创意组件报告', url: '/creativeComponent',
                    }, {
                        name: '高级样式报告', url: '/styles',
                    }, {
                        name: '视频报告', url: '/video',
                    }, {
                        name: '图片报告', url: '/image',
                    }]
                }, {
                    name: '落地页报告',
                    children: [{
                        name: '落地页报告', url: '/landingPage',
                    }, {
                        name: '访客明细', url: '/vistorDetail',
                    }
                    ]
                }, {
                    name: '专项报告',
                    children: [{
                        name: '数据简报', url: '/insight',
                    }, {
                        name: '小程序报告', url: '/program',
                    }, {
                        name: '实时报告', url: '/realTime',
                    }, {
                        name: '无效点击报告', url: '/invalidClick',
                    },

                        {
                        name: '数据万花筒',url: '/custom',
                    }, {
                        name: '本地店铺报告', url: '/store',
                    },
                    ]
                }],
                projectId: '',
                // 菜单搜索model
                selectModel: "",
                filterOptions: [],
            };
        },
        watch: {
            activeProjectId(val) {
                this.projectId = val
            }
        },
        computed: {},
      created() {
      },

      methods: {
        isParentActive(item) {
          return item.children.some(child => child.url === this.activeIndexs);
        },
        btnXiu() {
          this.$message('服务器繁忙,请稍后重试！');
          return
        },
        changeActiveIndexs(activeIndexs){
          this.activeIndexs=activeIndexs
        },
            changeIsCollapse(isCollapse) {
                this.isCollapse = isCollapse
            },
        handleSelect(index, indexPath) {
          const targetPath = indexPath[indexPath.length - 1];
          if (this.$router.currentRoute.path !== targetPath) {
            this.activeIndexs = targetPath;
            if (indexPath[0] === '无效线索报告' || indexPath[0] === '转化效果度量报告') {
              this.btnXiu();
            }
          }
        },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
    };
</script>

<style lang="less" scoped>
.datacenter-navigation {
  width: 300px;
  transition: width 400ms ease-in-out;
  position: relative;
  background: white;
  top: 1px;

  .header-bar {
    display: flex;
    align-items: center;
    padding: 16px 11px 8px 22px;
    border-bottom: 1px solid #e2e6f0;

    .account-name {
      flex: 1;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 24px;
      font-weight: 700;
    }

    .icon {
      padding: 0;
      margin: 0;
      box-sizing: var(--light-ai-box-sizing, border-box);
      display: inline-block;
      width: auto;
      height: 1em;
      fill: currentColor;
      vertical-align: -0.125em;
      cursor: pointer;
      font-size: 14px;
    }
  }
}

.datacenter-navigation-closed {
  width: 60px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/deep/ .el-menu-item, /deep/ .el-submenu__title {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.el-menu-item.is-active {
  color: #0054e6;
  background-color: #ebf2ff;
  font-weight: 500;
  position: relative;
}

.el-menu-item.is-active:after {
  content: '';
  top: 0;
  right: 0;
  width: 2px;
  position: absolute;
  height: 100%;
  transition: background-color 0.2s ease-out;
  background-color: #0054e6;
}
.active-parent {
  /deep/.el-submenu__title{

    color: #0054e6;

  }
  /deep/.el-submenu__icon-arrow{
    color: #0054e6;

  }
}

</style>



